<template>
	<view class="plandetails-warp">
		<ScrollViewComponent @get-list="getList">
			<view class="plandetails-background-top">
				<view class="plandetails-card">
					<view class="card-row-first">
						<view>
							改造进度
						</view>
						<view class="zhuangt">
							<text class="zhuangt-font">已完成</text>
						</view>
					</view>
					<view class="card-row-main">
						<view class="card-row-main-info">
							<view class="main-title">单位编码</view>
							<view class="main-info">ABC1234567897897</view>
						</view>
						<view class="card-row-main-info">
							<view class="main-title">单位名称</view>
							<view class="main-info">事件小类事件小类事件小类事件小类事件小类事件小类事件小类事件小类</view>
						</view>
						<view class="card-row-main-info" style="margin-bottom: 10rpx;">
							<view class="main-title">改造时间</view>
							<view class="main-info">事件位置</view>
						</view>
						<view class="card-row-main-info">
							<view class="main-title">上报人</view>
							<view class="main-info">事件描述</view>
						</view>
					</view>
				</view>
			</view>
		</ScrollViewComponent>

		<!--		<view class="plandetails-background-bottom">-->
		<!--			<button class="anniu btn-daka" @click="toDaK"><image style="width: 32rpx;vertical-align: middle;margin: 0 10rpx 7rpx 0;" src="../../static/img/plandetails_icon1.png" mode="widthFix"></image>打卡</button>-->
		<!--			<button class="anniu btn-jiancha" @click="toshangBLB"><image style="width: 32rpx;vertical-align: middle;margin: 0 10rpx 7rpx 0;" src="../../static/img/plandetails_icon2.png" mode="widthFix"></image>检查</button>-->
		<!--		</view>-->
	</view>
</template>

<script>
	import ScrollViewComponent from '@/components/scroll-view-component/index.vue'
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#1FC186',
				},
				list: []
			}
		},
		methods: {
			toDaK() {
				uni.navigateTo({
					url: '../daK/daK'
				});
			},
			toshangBLB() {
				uni.navigateTo({
					url: '../shangBLB/shangBLB'
				});
			},
			getList(list) {
				console.log(list);
				this.list = list
			}
		},
		components: {
			ScrollViewComponent
		}
	}
</script>

<style>
	.plandetails-warp {
		width: 100%;
		min-height: 100%;
		background: rgba(243, 243, 243, 1);
		padding-bottom: 100rpx;
		padding-top: 30rpx;
	}

	.plandetails-background-top {
		width: 100%;
		/*height:189rpx;*/
		/*background:rgba(31,193,134,1);*/
		position: relative;

	}

	.plandetails-card {
		width: 94%;
		height: auto;
		/*background:url(../../static/img/plandetails-card.png) no-repeat;*/
		/*background-size: 100% 100%;*/
		/*background: linear-gradient(45deg, rgb(64, 158, 255), rgba(64, 158, 255, 0.7));*/
		background: rgba(255, 255, 255, .8);
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(64, 158, 255, 0.4);
		border-radius: 12rpx;
		overflow: hidden;
		margin: 0 auto 30rpx;
	}

	.card-row-first {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 74rpx;
		padding: 0 36rpx;
		border-bottom: 1px dashed #EFEFEF;
		background: linear-gradient(45deg, rgb(64, 158, 255), rgba(64, 158, 255, 0.7));
		color: #fff;
	}

	.img-people {
		width: 28rpx;
		height: 36rpx;
		margin-right: 18rpx;
	}

	.zhuangt {
		width: 148rpx;
		height: 40rpx;
		background: rgba(255, 216, 174, 1);
		border-radius: 20rpx;
		text-align: center;
	}

	.zhuangt-font {
		width: 72rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang-SC-Bold, PingFang-SC;
		font-weight: bold;
		color: rgba(223, 137, 37, 1);
		line-height: 34rpx;
	}

	.card-row-main {
		width: 100%;
		padding: 20rpx 36rpx;
	}

	.card-row-main-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 52rpx;
		font-size: 28rpx;
		line-height: 52rpx;
		font-weight: 500;
		color: rgba(59, 59, 59, .8);
	}

	.main-title {
		width: 30%;
		position: relative;
		padding-left: 20rpx;
	}

	.main-title::before {
		width: 6rpx;
		height: 6rpx;
		content: "";
		background: #409eff;
		position: absolute;
		top: 20rpx;
		left: 7rpx;
		border-radius: 50%;
	}

	.main-info {
		width: 70%;
		flex: 1;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		text-align: right;
	}

	.plandetails-background-bottom {
		margin-top: 290rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 36rpx;

	}

	.anniu {
		width: 330rpx;
		height: 82rpx;
		line-height: 82rpx;
		background: linear-gradient(180deg, rgba(23, 195, 132, 1) 0%, rgba(33, 206, 143, 1) 100%);
		border-radius: 41rpx;
		font-size: 28rpx;
		font-weight: 500;

		color: rgba(255, 255, 255, 1);
	}

	.btn-jiancha {
		background: linear-gradient(180deg, rgba(243, 162, 68, 1.0) 0%, rgba(234, 143, 38, 1.0) 100%);
	}
</style>
